@import './variable.scss';
@import './common.scss';
/*******width**********/
@mixin w($w) {
    .w#{$w} {
      width: $w + px;
    }
  }
  /*******padding**********/
  @mixin pl($num) {
    .pl#{$num} {
      padding-left: $num + px;
    }
  }
  @mixin pr($num) {
    .pr#{$num} {
      padding-right: $num + px;
    }
  }
  @mixin pt($num) {
    .pt#{$num} {
      padding-top: $num + px;
    }
  }
  @mixin pb($num) {
    .pb#{$num} {
      padding-bottom: $num + px;
    }
  }
  /*******margin**********/
  @mixin ml($num) {
    .ml#{$num} {
      margin-left: $num + px;
    }
  }
  @mixin mr($num) {
    .mr#{$num} {
      margin-right: $num + px;
    }
  }
  @mixin mt($num) {
    .mt#{$num} {
      margin-top: $num + px;
    }
  }
  @mixin mb($num) {
    .mb#{$num} {
      margin-bottom: $num + px;
    }
  }
  /*******font-size**********/
  @mixin f($num) {
    .f#{$num} {
      font-size: $num + px;
    }
  }
  @for $num from 2 to 100 {
    @if ($num%2 ==0) {
      @include w($num);
      @include pl($num);
      @include pr($num);
      @include pt($num);
      @include pb($num);
      @include ml($num);
      @include mr($num);
      @include mt($num);
      @include mb($num);
      @include f($num);
    }
  }
  /*******background-color**********/
  @mixin c_bg($class, $num) {
    .c#{$class} {
      color: $num;
    }
    .bg#{$class} {
      background-color: $num;
    }
  }
  @include w(150);
  @include w(200);
  @include w(220);
  @include ml(280);
  @include f(13);
  @include c_bg(1, $c1);
  @include c_bg(2, $c2);
  @include c_bg(3, $c3);
 